<!-- 
展示屏幕文字滚动效果
 
使用方法：

 -->
<!-- 
展示屏幕文字滚动效果

usage:
 list:数组数据
 @getCurrentIndex  获取当前swiper的下标
 <textscroll :list="list" @getCurrentIndex="getIndex"/>

 -->

<template>
	<view class="_notice">
		<swiper class="_swiper tc" @change="slideChange" indicator-dots="false" autoplay="true" :interval="interval" circular="true"
		 display-multiple-items="1" :duration="duration">
			 <swiper-item v-for="(item,index) in list" :key="index" @click="open(item)">
				<view class="_notice_li ">{{item.title}}</view>
			 </swiper-item>
			<swiper-item>
				<view class=" "></view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			//显示数据
			list: {
				type: Array,
				defual:function(){
					return [];
				}
			},
		},
		data() {
			return {
				interval:3000,
				duration:12000,
			};
		},
		methods:{
			slideChange(e){
				this.$emit('getCurrentIndex',e.detail.current); 
				
			},
			open(item){
				// #ifdef H5
					uni.navigateTo({
						url: '/pages/news/bulletin-info/bulletin-info?article_id=' + item.id
					});
				// #endif
				// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/news/bulletin-info/bulletin-info?detailDate=' + encodeURIComponent(JSON.stringify(item))
					});
				// #endif
			}
		}

	};
</script>

<style lang="scss">
	._notice {
		width: 100%;
		background: none;
		height: 44upx;
		color: #ee5b5e;
		font-size: 36upx;
		overflow: hidden;
		box-sizing: border-box;
	}

	._swiper {
		line-height: 44upx;
		width: 100%;
		
	}
	._notice_li{
		width: 100%;
	}
</style>
